<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<div th:replace="~{fragment/headFragment :: head}"></div>

<body class="cbp-spmenu-push">
	<div class="main-content">


		<div th:replace="~{fragment/left-border :: left}"></div>

		<div th:replace="~{fragment/header :: header}"></div>

<!--		<div style="position: fixed;width:300px;">首页</div>-->

		<div id="page-wrapper">
			<div class="main-page">
				<div class="row-one">
					<div class="col-md-4 widget">
						<div class="stats-left ">
							<h5>Total</h5>
							<h4>客户数</h4>
						</div>
						<div class="stats-right">
							<label th:text="${session.customerCount}"> 45</label>
						</div>
						<div class="clearfix"> </div>	
					</div>
					<div class="col-md-4 widget states-mdl">
						<div class="stats-left">
							<h5>Total</h5>
							<h4>客服数</h4>
						</div>
						<div class="stats-right">
							<label th:text="${session.csCount}"> 80</label>
						</div>
						<div class="clearfix"> </div>	
					</div>
					<div class="col-md-4 widget states-last">
						<div class="stats-left">
							<h5>Today</h5>
							<h4>考勤人数</h4>
						</div>
						<div class="stats-right">
							<label th:text="${session.AttStaCount}"> 70</label>
						</div>
						<div class="clearfix"> </div>	
					</div>
					<div class="clearfix"> </div>	
				</div>
				<div class="charts">
					<div class="col-md-4 charts-grids widget">
						<h4 class="title" style="color: red">工作质量总览：</h4>
						<canvas id="bar" height="300" width="400"> </canvas>
					</div>
					<div class="col-md-4 charts-grids widget states-mdl">
						<h4 class="title" style="color: red">考勤最高时长统计：</h4>
						<canvas id="line" height="300" width="400"> </canvas>
					</div>
					<div class="col-md-4 charts-grids widget">
						<h4 class="title" style="color: red">各平台来源及占有比例：</h4>
						<canvas id="pie" height="300" width="400"> </canvas>
					</div>
					<div class="clearfix"> </div>
							 <script th:inline="javascript">
								 var sumeffsess1 =/*[[${session.sumeffsess1}]]*/;
								 var sumresolve1 =/*[[${session.sumresolve1}]]*/;
								 var sumnosolve1 =/*[[${session.sumnosolve1}]]*/;
								 var sumgood1 =/*[[${session.sumgood1}]]*/;
								 var summedium1 =/*[[${session.summedium1}]]*/;
								 var sumbad1 =/*[[${session.sumbad1}]]*/;
								 var sumno1 =/*[[${session.sumno1}]]*/;

								 var maxLogin1 =/*[[${session.maxLogin1}]]*/;
								 var maxFree1 =/*[[${session.maxFree1}]]*/;
								 var maxBusy1 =/*[[${session.maxBusy1}]]*/;
								 var maxOnline1 =/*[[${session.maxOnline1}]]*/;
								 var maxOffline1 =/*[[${session.maxOffline1}]]*/;



								 var barChartData = {
									 labels : ["有效会话总数","已处理总数","未处理总数","好评总数","中评总数","差评总数","未评价总数"],
									 datasets : [

										 {
											 fillColor : "rgb(198,207,231)",
											 strokeColor : "#585858",
											 highlightFill: "#585858",
											 data : [sumeffsess1,sumresolve1,sumnosolve1,sumgood1,summedium1,sumbad1,sumno1]
										 }
									 ]

								 };
								 var lineChartData = {
									 labels : ["","登录时长","空闲时长","工作时长","在线时长","离线时长",""],
									 datasets : [

										 {
											 fillColor : "rgb(255,203,0)",
											 strokeColor : "#6164C1",
											 pointColor : "rgba(97, 100, 193,1)",
											 pointStrokeColor : "#9358ac",
											 data : [0,maxLogin1,maxFree1,maxBusy1,maxOnline1,maxOffline1,0]

										 }
									 ]

								 };
								 var weixin1 =/*[[${session.weixin1.getVisitorcount()}]]*/;
								 var phoneapp1 =/*[[${session.phoneapp1.getVisitorcount()}]]*/;
								 var wangye1 =/*[[${session.wangye1.getVisitorcount()}]]*/;
								 var weixingz1 =/*[[${session.weixingz1.getVisitorcount()}]]*/;
								 var weibo1 =/*[[${session.weibo1.getVisitorcount()}]]*/;
								 var toutiao1 =/*[[${session.toutiao1.getVisitorcount()}]]*/;
								 var pieData = [
									 {
										 value: weixin1,
										 color:"rgba(233, 78, 2, 1)",
										 label: "微信小程序"
									 },
									 {
										 value: phoneapp1,
										 color:"rgb(179,0,255)",
										 label: "手机App"
									 },
									 {
										 value: wangye1,
										 color:"rgb(12,41,234)",
										 label: "网页"
									 },
									 {
										 value : weixingz1,
										 color : "rgba(242, 179, 63, 1)",
										 label: "微信工作号"
									 },
									 {
										 value : weibo1,
										 color : "rgb(59,51,51)",
										 label: "微博"
									 },
									 {
										 value : toutiao1,
										 color : "rgb(79,174,186)",
										 label: "头条号"
									 }

								    ];
							new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
							new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
							new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData);

							</script>

				</div>


				<div class="row calender widget-shadow">
					<h4 class="title"  style="color: red">团队日历</h4>
					<div class="cal1">
						
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>

	</div>
	<!-- Classie -->
		<script src="js/classie.js"></script>
		<script>
			var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
				showLeftPush = document.getElementById( 'showLeftPush' ),
				body = document.body;
				
			showLeftPush.onclick = function() {
				classie.toggle( this, 'active' );
				classie.toggle( body, 'cbp-spmenu-push-toright' );
				classie.toggle( menuLeft, 'cbp-spmenu-open' );
				disableOther( 'showLeftPush' );
			};
			

			function disableOther( button ) {
				if( button !== 'showLeftPush' ) {
					classie.toggle( showLeftPush, 'disabled' );
				}
			}
		</script>
	<!--scrolling js-->
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/scripts.js"></script>
	<!--//scrolling js-->
	<!-- Bootstrap Core JavaScript -->
   <script src="js/bootstrap.js"> </script>
</body>
</html>